<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏页面</title>

<script src="js/prototype.lite.js" type="text/javascript"></script>
<script src="js/moo.fx.js" type="text/javascript"></script>
<script src="js/moo.fx.pack.js" type="text/javascript"></script>
<style>
body {
	font:12px Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #66cc66;
	margin: 0px;
	margin-left: 6px;
	background-image: url(image/menu_bag.png);
}
#container {
	width: 182px;
}
H1 {
	font-size: 15px;
	margin: 0px;
	width: 182px;
	cursor: pointer;
	height: 30px;
	line-height: 20px;	
}
H1 a {
	display: block;
	width: 182px;
	color: #000055;
	height: 30px;
	text-decoration: none;
	moz-outline-style: none;
	background-image: url(image/menu.jpg);
	background-repeat: no-repeat;
	line-height: 30px;
	text-align: center;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
}
.content{
	width: 182px;
	height: 45px;
	
}
.MM ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	display: block;
}
.MM li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 26px;
	color: #0033ff;
	list-style-type: none;
	display: block;
	text-decoration: none;
	height: 26px;
	width: 182px;
	padding-left: 0px;
}
.MM {
	width: 182px;
	margin: 0px;
	padding: 0px;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	clip: rect(0px,0px,0px,0px);
}
.MM a:link {
	font-family: Helvetica;
	font-size: 13px;
	line-height: 35px;
	color: #9933ff;
	background-image: url(image/menu_bg1.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 182px;
	display: block;
	text-align: center;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	text-decoration: none;
}
.MM a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 26px;
	color: #9933ff;
	background-image: url(image/menu_bg1.gif);
	background-repeat: no-repeat;
	display: block;
	text-align: center;
	margin: 0px;
	padding: 0px;
	height: 26px;
	width: 182px;
	text-decoration: none;
}
.MM a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: #333333;
	background-image: url(image/menu_bg1.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 182px;
	display: block;
	text-align: center;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	text-decoration: none;
}
.MM a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 26px;
	font-weight: bold;
	background-repeat: no-repeat;
	text-align: center;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 26px;
	width: 182px;
	text-decoration: none;
	
	background:#146C9C;  /*变换背景色 */
	color:#fff;  /*变换文字颜色 */
}
</style>
</head>

<body>
<table width="100%" height="280" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc">
  <tr>
    <td width="181" valign="top" background="image/menu_bag.png"><div id="container">
      <h1 class="type"><a href="javascript:void(0)">节点1</a></h1>
      <div class="content">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="image/menu_line.jpg" width="182" height="5" /></td>
          </tr>
        </table>
        <ul class="MM">
          <li><a href="env1.html" target="rightFrame">环境信息</a></li>
          <li><a href="video.html" target="rightFrame">实时监控</a></li>
          <li><a href="photo.html" target="rightFrame">历史照片</a></li>
          <li><a href="control1.html" target="rightFrame">远程控制</a></li>
          <li><a href="setting1.html" target="rightFrame">高级设置</a></li>
        </ul>
      </div>
      <h1 class="type"><a href="javascript:void(0)">节点2</a></h1>
      <div class="content">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="image/menu_line.jpg" width="182" height="5" /></td>
          </tr>
        </table>
        <ul class="MM">
          <li><a href="env2.html" target="rightFrame">环境信息</a></li>
          <li><a href="video.html" target="rightFrame">实时监控</a></li>
          <li><a href="photo.html" target="rightFrame">历史照片</a></li>
          <li><a href="control2.html" target="rightFrame">远程控制</a></li>
          <li><a href="setting2.html" target="rightFrame">高级设置</a></li>
        </ul>
      </div>
      <h1 class="type"><a href="javascript:void(0)">管理设置</a></h1>
      <div class="content">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="image/menu_line.jpg" width="182" height="5" /></td>
          </tr>
        </table>
        <ul class="MM">
          <li><a href="setting_user.html" target="rightFrame">用户设置</a></li>
          <li><a href="right.html" target="rightFrame">帮助</a></li>
        </ul>
      </div>
        <script type="text/javascript">
		var contents = document.getElementsByClassName('content');
		var toggles = document.getElementsByClassName('type');
	
		var myAccordion = new fx.Accordion(
			toggles, contents, {opacity: true, duration: 400}
		);
		myAccordion.showThisHideOpen(contents[0]);
	</script>
    </td>
  </tr>
</table> 
</body>
</html>
